import { useState } from 'react'
import { DemoBlock } from '@/library/widgets/DemoBlock'
import { Space } from '@/library/gallery/components/Space'
import { Button } from '@/library/gallery/components/Button'
import { Popup } from '@/library/gallery/components/Popup'
import styles from './index.module.scss'

export default (): any => {
  const [visible1, setVisible1] = useState(false)
  const [visible2, setVisible2] = useState(false)
  const [visible3, setVisible3] = useState(false)
  const [visible4, setVisible4] = useState(false)
  const [visible5, setVisible5] = useState(false)
  const [visible6, setVisible6] = useState(false)
  const [visible7, setVisible7] = useState(false)
  const [visible8, setVisible8] = useState(false)

  const mockLongContent = (
    <div className={styles['content-scroll']}>
      Excepteur sit amet eiusmod labore ad commodo ullamco magna mollit deserunt velit eiusmod irure. Aute exercitation sint eu in adipisicing nostrud in ad. Non qui adipisicing quis adipisicing dolore aliqua. Aliquip laboris culpa veniam veniam amet cillum duis Lorem excepteur. Aute ipsum aliqua irure eiusmod dolor sint laborum amet voluptate eu sunt mollit labore.
      Excepteur sit amet eiusmod labore ad commodo ullamco magna mollit deserunt velit eiusmod irure. Aute exercitation sint eu in adipisicing nostrud in ad. Non qui adipisicing quis adipisicing dolore aliqua. Aliquip laboris culpa veniam veniam amet cillum duis Lorem excepteur. Aute ipsum aliqua irure eiusmod dolor sint laborum amet voluptate eu sunt mollit labore.
      Excepteur sit amet eiusmod labore ad commodo ullamco magna mollit deserunt velit eiusmod irure. Aute exercitation sint eu in adipisicing nostrud in ad. Non qui adipisicing quis adipisicing dolore aliqua. Aliquip laboris culpa veniam veniam amet cillum duis Lorem excepteur. Aute ipsum aliqua irure eiusmod dolor sint laborum amet voluptate eu sunt mollit labore.
      Excepteur sit amet eiusmod labore ad commodo ullamco magna mollit deserunt velit eiusmod irure. Aute exercitation sint eu in adipisicing nostrud in ad. Non qui adipisicing quis adipisicing dolore aliqua. Aliquip laboris culpa veniam veniam amet cillum duis Lorem excepteur. Aute ipsum aliqua irure eiusmod dolor sint laborum amet voluptate eu sunt mollit labore.
      Excepteur sit amet eiusmod labore ad commodo ullamco magna mollit deserunt velit eiusmod irure. Aute exercitation sint eu in adipisicing nostrud in ad. Non qui adipisicing quis adipisicing dolore aliqua. Aliquip laboris culpa veniam veniam amet cillum duis Lorem excepteur. Aute ipsum aliqua irure eiusmod dolor sint laborum amet voluptate eu sunt mollit labore.
      Excepteur sit amet eiusmod labore ad commodo ullamco magna mollit deserunt velit eiusmod irure. Aute exercitation sint eu in adipisicing nostrud in ad. Non qui adipisicing quis adipisicing dolore aliqua. Aliquip laboris culpa veniam veniam amet cillum duis Lorem excepteur. Aute ipsum aliqua irure eiusmod dolor sint laborum amet voluptate eu sunt mollit labore.
      Excepteur sit amet eiusmod labore ad commodo ullamco magna mollit deserunt velit eiusmod irure. Aute exercitation sint eu in adipisicing nostrud in ad. Non qui adipisicing quis adipisicing dolore aliqua. Aliquip laboris culpa veniam veniam amet cillum duis Lorem excepteur. Aute ipsum aliqua irure eiusmod dolor sint laborum amet voluptate eu sunt mollit labore.
      Excepteur sit amet eiusmod labore ad commodo ullamco magna mollit deserunt velit eiusmod irure. Aute exercitation sint eu in adipisicing nostrud in ad. Non qui adipisicing quis adipisicing dolore aliqua. Aliquip laboris culpa veniam veniam amet cillum duis Lorem excepteur. Aute ipsum aliqua irure eiusmod dolor sint laborum amet voluptate eu sunt mollit labore.
      Excepteur sit amet eiusmod labore ad commodo ullamco magna mollit deserunt velit eiusmod irure. Aute exercitation sint eu in adipisicing nostrud in ad. Non qui adipisicing quis adipisicing dolore aliqua. Aliquip laboris culpa veniam veniam amet cillum duis Lorem excepteur. Aute ipsum aliqua irure eiusmod dolor sint laborum amet voluptate eu sunt mollit labore.
      Excepteur sit amet eiusmod labore ad commodo ullamco magna mollit deserunt velit eiusmod irure. Aute exercitation sint eu in adipisicing nostrud in ad. Non qui adipisicing quis adipisicing dolore aliqua. Aliquip laboris culpa veniam veniam amet cillum duis Lorem excepteur. Aute ipsum aliqua irure eiusmod dolor sint laborum amet voluptate eu sunt mollit labore.
      Excepteur sit amet eiusmod labore ad commodo ullamco magna mollit deserunt velit eiusmod irure. Aute exercitation sint eu in adipisicing nostrud in ad. Non qui adipisicing quis adipisicing dolore aliqua. Aliquip laboris culpa veniam veniam amet cillum duis Lorem excepteur. Aute ipsum aliqua irure eiusmod dolor sint laborum amet voluptate eu sunt mollit labore.
    </div>
  )

  const mockContent = (
    <div className={styles['content-padding']}>
      Excepteur sit amet eiusmod labore ad commodo ullamco magna mollit deserunt velit eiusmod irure. Aute exercitation sint eu in adipisicing nostrud in ad. Non qui adipisicing quis adipisicing dolore aliqua. Aliquip laboris culpa veniam veniam amet cillum duis Lorem excepteur. Aute ipsum aliqua irure eiusmod dolor sint laborum amet voluptate eu sunt mollit labore.
    </div>
  )

  return (
    <>
      <DemoBlock title="弹出位置">
        <Space wrap>
          <>
            <Button
              onClick={() => {
                setVisible1(true)
              }}
            >
              底部弹出
            </Button>
            <Popup
              // style={{ '--z-index': '10000' }}
              closeOnSwipe
              onClick={() => { console.info('==== onBodyClick ====') }}
              visible={visible1}
              onClose={() => {
                setVisible1(false)
              }}
              bodyStyle={{ height: '40vh' }}
            >
              {mockContent}
            </Popup>
          </>
          <>
            <Button
              onClick={() => {
                setVisible2(true)
              }}
            >
              顶部弹出
            </Button>
            <Popup
              visible={visible2}
              onMaskClick={() => {
                console.log('==== onMaskClick ====')
              }}
              onClose={() => {
                setVisible2(false)
              }}
              position="top"
            >
              {mockContent}
            </Popup>
          </>
          <>
            <Button
              onClick={() => {
                setVisible3(true)
              }}
            >
              左侧弹出
            </Button>
            <Popup
              visible={visible3}
              position="left"
              bodyStyle={{ width: '60vw' }}
              onClose={() => {
                setVisible3(false)
              }}
            >
              {mockContent}
            </Popup>
          </>
          <>
            <Button
              onClick={() => {
                setVisible4(true)
              }}
            >
              右侧弹出
            </Button>
            <Popup
              visible={visible4}
              position="right"
              onClose={() => {
                setVisible4(false)
              }}
            >
              {mockContent}
            </Popup>
          </>
        </Space>
      </DemoBlock>

      <DemoBlock title="自定义样式">
        <Space direction="vertical">
          <>
            <Button
              onClick={() => {
                setVisible5(true)
              }}
            >
              圆角的弹出层 - 不展示关闭按钮
            </Button>
            <Popup
              showCloseButton={false}
              visible={visible5}
              onMaskClick={() => {
                setVisible5(false)
              }}
              bodyStyle={{
                borderTopLeftRadius: '8px',
                borderTopRightRadius: '8px',
                minHeight: '40vh',
              }}
            >
              {mockContent}
            </Popup>
          </>
          <>
            <Button
              onClick={() => {
                setVisible6(true)
              }}
            >
              不显示关闭按钮
            </Button>

            <Popup
              visible={visible6}
              position="top"
              showCloseButton={false}
              onClose={() => {
                setVisible6(false)
              }}
            >
              {mockContent}
            </Popup>
          </>
          <>
            <Button
              onClick={() => {
                setVisible7(true)
              }}
            >
              内容超长滚动
            </Button>
            <Popup
              visible={visible7}
              onClose={() => {
                setVisible7(false)
              }}
            >
              {mockLongContent}
            </Popup>
          </>
          <>
            <Button
              onClick={() => {
                setVisible8(true)
              }}
            >
              无遮罩 - 不建议使用
            </Button>
            <Popup
              mask={false}
              visible={visible8}
              onClose={() => {
                setVisible8(false)
              }}
            >
              {mockLongContent}
            </Popup>
          </>
        </Space>
      </DemoBlock>

      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
      <p>123</p>
    </>
  )
}
